import { PageContainer } from '@ant-design/pro-components';
import React, {useEffect, useState} from 'react';
import { List, message} from "antd";
import {listInterfaceInfoByPageUsingGET} from "@/services/yuapi-backend/interfaceInfoController";

/**
 *
 *   主页      ====== 加载接口列表 ======
 *   也就是调用组件，出现啥问题， 直接查文档
 * @constructor—
 */
const Index: React.FC = () => {
  // 状态变量
  const [loading, setLoading] = useState(false);
  const [list, setList] = useState<API.InterfaceInfo[]>([]);
  const[total,setTotal] = useState<number>(0);

  //设置当前页current 容量10
  const loadData = async (current = 1,pageSize = 5)=>{
    setLoading(true);
    try{
      const res = await listInterfaceInfoByPageUsingGET({
        current,pageSize
      });
      // 防止为空的处理 ？？？
      setList(res?.data?.records ?? []);
      setTotal(res?.data?.total ?? 0);
    }catch(error:any){
      message.error('请求失败.' + error.message);
    }
    setLoading(false);
  }


  // 非常重要的加载数据 ： 加载数据的逻辑   useEffect在首次加载时向后台发送请求
  useEffect(()=>{
  loadData();
  },[])

  //渲染数据的逻辑
  return (
    <PageContainer title={"在线接口开放平台"}>
      <List
        className="my-list"
        loading={loading}
        itemLayout="horizontal"
        dataSource={list}

        renderItem={(item) => {
          const apiLink = `/interface_info/${item.id}`;
         return(
            <List.Item actions={[<a key={item.id} href={apiLink}>查看</a>]}>
             <List.Item.Meta
               title={<a href={apiLink}>{item.name}</a>}
               description={item.description}
             />
           </List.Item>
         );
        }
        }

        pagination={
          {
            showTotal(total:number){
              return '总数' + total;
            },
            pageSize:5,
            total,
            // 点击触发分页切换
            onChange(page,pageSize){
              loadData(page,pageSize);
            }
          }
        }


      />
    </PageContainer>
  );
};

export default Index;
